<script setup>
import {onMounted, onUnmounted, ref, watch} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const state = ref({
  current: 0,
  lastIndex: 0,
  menuOpen: false,
  popupMenuHeight: 400,
  black: false,
  currentHover: -1,
  menus: ['品牌出海全案', '品牌策划设计', '新媒体运营及活动策划'],
});
const popupMenu = ref({});
const emit = defineEmits(['onArticleShow']);

onMounted(() => {
  watch(
      () => router.currentRoute.value,
      (newValue) => {
        const path = newValue.path;
        console.log('path', path)
        if (path.startsWith('/service-case')) {
          state.value.current = 1;
        } else if (path.startsWith('/case')) {
          state.value.current = 2;
        } else if (path.startsWith('/insight')) {
          state.value.current = 3;
        } else if (path.startsWith('/about')) {
          state.value.current = 4;
        } else if (path.startsWith('/contact')) {
          state.value.current = 5;
        } else if (path.startsWith('/service')) {
          state.value.current = 1;
        } else {
          state.value.current = 0;
        }
        emit('onArticleShow', newValue.path !== '/article');
        state.value.lastIndex = state.value.current;
        close();
        window.scrollTo(0, 0);
      },
      {immediate: true}
  )
  window.addEventListener('scroll', checkScroll);
  window.addEventListener('mousemove', onMousemove);
})

onUnmounted(() => {
  window.removeEventListener('scroll', checkScroll);
  window.removeEventListener('mousemove', onMousemove);
})

const checkScroll = () => {
  state.value.black = window.scrollY > 100;
}

const close = () => {
  state.value.menuOpen = false;
}

const push = (url) => {
  close();
  state.value.current = state.value.lastIndex;
  router.push(url);
}

const nav = (i) => {
  close();
  router.push(`/service/${i + 1}`)
}

const openPopMenu = () => {
  state.value.current = 1;
  state.value.menuOpen = true;
  state.value.popupMenuHeight = popupMenu.value?.offsetHeight ?? 400;
}
const closePopMenu = () => {
  setTimeout(() => {
    state.value.menuOpen = false;
    // 关闭后重置为原来的菜单项目
    state.value.current = state.value.lastIndex;
  }, 1000)
}
const onMousemove = (e) => {
  if (state.value.menuOpen && e.clientY > state.value.popupMenuHeight) {
    closePopMenu()
  }
}
</script>

<template>
  <view class="column container" :class="{active: state.menuOpen || state.black}">
    <view class="row content">
      <img class="logo" src="../assets/icons/logo.png" alt=""/>
      <view class="row menu">
        <view class="header-item font18" :class="{active: state.current === 0}" @click="push('/')">首页</view>
        <view class="row header-item font18 center" :class="{active: state.current === 1 || state.menuOpen}"
              @mouseenter="openPopMenu">
          <view style="margin-right: 0.1em;">主要服务</view>
          <img :src="state.menuOpen? '../images/menu/icon_menu_blue.png':'../images/menu/icon_menu_white.png'"
               alt="" :style="{transform: state.menuOpen ? `rotate(0deg)`: `rotate(-180deg)`}"/>
        </view>
        <view class="header-item font18" :class="{active: state.current === 2}"
              @click="push('/case')">案例介绍
        </view>
        <view class="header-item font18" :class="{active: state.current === 3}"
              @click="push('/insight')">行业洞察
        </view>
        <view class="header-item font18" :class="{active: state.current === 4}"
              @click="push('/about')">关于我们
        </view>
        <view class="header-item font18" :class="{active: state.current === 5}"
              @click="push('/contact')">联系我们
        </view>
      </view>
    </view>
  </view>
  <view v-if="state.menuOpen" class="column pop-menu" ref="popupMenu">
    <view class="row pop-main">
      <view v-for="(item, i) in state.menus" class="column item" @click="nav(i)"
            @mouseenter="state.currentHover=i" @mouseleave="state.currentHover=-1">
        <view class="bg">
          <img :src="`../images/menu/img_menu_bg${i+1}.png`" alt="" :class="{active: state.currentHover === i}"/>
        </view>
        <view class="text">{{ item }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  height: 3.3em;
  position: fixed;
  z-index: 9;
  top: 0;
  background-color: transparent;

  &.active {
    background-color: black;
  }

  .content {
    z-index: 1;
    height: 3.33em;
    align-items: center;
    justify-content: space-between;

    .logo {
      height: 1.5em;
    }

    .menu {
      margin-right: 1%;
      align-items: center;
      transition: color 0.5s,
      background-color 0.5s;

      .header-item {
        margin-right: 4em;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        img {
          width: 1.2em;
          object-fit: cover;
        }
      }

      .header-item.center {
        align-items: center;
      }

      .header-item.active {
        color: var(--vt-c-theme);
      }
    }

  }
}

.pop-menu {
  height: 20em;
  background-color: black;
  position: fixed;
  z-index: 10;
  padding: 2em 160px;
  animation: topIn 0.3s ease-in;
  top: 2.8em;

  .pop-main {
    justify-content: center;
    width: 100%;
  }

  .item {
    cursor: pointer;
    font-size: 2em;

    .bg {
      margin: 0 0.2em;
      height: 8em;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease 0.1s;

        &.active {
          transform: scale(1.2, 1.2);
        }
      }
    }

    .text {
      margin-top: -4.5em;
      text-align: center;
      z-index: 1;
    }
  }
}
</style>